import axios from "axios";
import { Rate } from "antd";
import 'antd/dist/antd.css';
import { Statistic, Row, Col,message} from 'antd';
import { React, useState, useEffect, useRef } from "react";
import InterIP from "../../IP/IP";
import './fridayDetails.css'
import { Outlet } from "react-router";
import { NavLink, useNavigate } from "react-router-dom";

import { Modal, Button } from "antd";

import CheckSizeWindow from "../../shoppingCart/checksizewindow";


export default function FridayDetails() {

    const { Countdown } = Statistic;
    //设置截止时间  
    var str = "2021/12/17 00:00:00";
    var endDate = new Date(str);
    const deadline = endDate.getTime();

    const number = useRef();
    const navigate = useNavigate();
    const [product, setProduct] = useState([]);
    const [buyNum, setBuyNum] = useState(1);
    const [buy_Number, setBuyNumber] = useState(1)
    let IP = InterIP().props.children;
    useEffect(() => {
        let IP = InterIP().props.children;
        let productId = localStorage.getItem('productId')
        let userId = document.cookie.slice(5);
        axios.post('http://' + IP + ':3000/index/product', {
            product_id: productId,
        }).then((res) => {
            setProduct((product) => product = res.data);
            // 浏览记录
            axios.post('http://' + IP + ':3000/user/addBrowsing', {
              product_id: res.data[0].product_id,
              commodity: res.data[0].product_name,
              commodity_img: res.data[0].product_img,
              introduce: res.data[0].product_brief,
              original_price: res.data[0].product_oldPrice,
              current_price: res.data[0].product_price,
              user_id: userId,
            }).then((res) => {
            })
        })
    }, [])
    //购物车
    const [isModalVisible, setIsModalVisible] = useState(false);

    const showModal = (e) => {
        setIsModalVisible(true);
        e.target.style.color = '#fff'
    };

    const handleOk = () => {
        setIsModalVisible(false);
    };
    const handleCancel1 = () => {
        setIsModalVisible(false);
    };
    //添加确认订单
    const [isModalVisible1, setIsModalVisible1] = useState(false);

    const showModal1 = (e) => {
        setIsModalVisible1(true);
        e.target.style.color = '#fff'
    };

    const handleOk1 = () => {
        setIsModalVisible1(false);
    };
    const handleCancel11 = () => {
        setIsModalVisible1(false);
    };
    function num(num) {
        setBuyNum((buyNum) => buyNum = num)
    }
    const handleCancel = (store_name, product_name, product_number, product_specification, product_id, product_price, product_img, judge) => {
        return () => {
            setIsModalVisible(false);
            let userId = document.cookie.slice(5);
            if (judge === 'cart') {
                axios.post('http://' + IP + ':3000/index/addCart', {
                    store_name: store_name,
                    user_id: userId,
                    cart_totalPrice: '0',
                    product: '{"store_name":"' + store_name + '","product_name":"' + product_name + '","product_number":' + product_number + ',"product_specification":"' + product_specification + '","product_price":' + product_price + ',"product_img":"' + product_img + '","buy_number":' + buyNum + ',"product_id":' + product_id + '}',
                }).then((res) => {
                    message.success(res.data.msg)
                })
            } else if (judge === 'ensure') {
                axios.post('http://' + IP + ':3000/index/ensure', {
                    store_name: store_name,
                    user_id: userId,
                    totalPrice: product_price * buyNum,
                    product: '{"product_name":"' + product_name + '","product_number":' + product_number + ',"product_specification":"' + product_specification + '","product_price":' + product_price + ',"product_img":"' + product_img + '","buy_number":' + buyNum + ',"product_id":' + product_id + '}'
                    ,
                }).then((res) => {
                    navigate('/home/confirmOrder')
                })
            }

        }
    };

    function clickNumMinus() {
        if (number.current.value <= 1) {
        } else {
            number.current.value--;
            setBuyNumber((buy_Number) => buy_Number = number.current.value)
        }
    }
    function clickNumAdd() {
        number.current.value++;
        setBuyNumber((buy_Number) => buy_Number = number.current.value)
    }

    var onOff = true;
    function collect(id, name, img, brief, oldPrice, price) {
        return () => {
            if (onOff) {
                let userId = document.cookie.slice(5);
                axios.post('http://' + IP + ':3000/user/addCollect', {
                    product_id: id,
                    commodity: name,
                    commodity_img: img,
                    introduce: brief,
                    original_price: oldPrice,
                    current_price: price,
                    user_id: userId,
                }).then((res) => {
                    console.log(res.data.msg);
                })
                onOff = false;
            } else {
                axios.post('http://' + IP + ':3000/user/delCollect', {
                    product_id: id,
                }).then((res) => {
                    console.log(res.data.msg);
                })
                onOff = true;
            }
        }
    }
    return (
        <div>
            <div className="lfy_productDetails">
                {product.map((data, k) =>
                    <div className="lfy_productDetails_up" key={k}>
                        <div className="lfy_productDetails_up_Img">
                            <div className="lfy_productDetails_up_bigImg">
                                <img src={data.product_img} alt="" />
                                <div className="lfy_friday_productTime">
                                    <div className="lfy_friday_productTime_word">距离活动开始</div>
                                    <Row gutter={16}>
                                        <Col span={24}>
                                            <Countdown title="" value={deadline} format="D 天 H 时 m 分 s 秒" valueStyle={{ color: "#ff5757" }} />
                                        </Col>
                                    </Row>
                                </div>
                            </div>
                            <div className="lfy_productDetails_up_smallImg">
                                <h6> </h6>
                                <div>
                                    <img src={data.product_img} alt="" />
                                </div>
                                <div>
                                    <img src={data.product_img} alt="" />
                                </div>
                                <div>
                                    <img src={data.product_img} alt="" />
                                </div>
                                <div>
                                    <img src={data.product_img} alt="" />
                                </div>
                                <h6> </h6>
                            </div>
                        </div>
                        <div className="lfy_productDetails_up_introduce">
                            <header className="lfy_productDetails_up_introduce_header">
                                <h6>{data.product_name}</h6>
                                <h4>
                                    <div>全国</div>
                                    <div>礼拜五</div>
                                    <div>自营</div>
                                </h4>
                            </header>
                            <div className="lfy_productDetails_up_introduce_body">
                                <div>{data.product_introduce}
                                </div>
                            </div>
                            <div className="lfy_productDetails_up_introduce_buySize">
                                <h6 className="lfy_productDetails_up_introduce_buySize_price">
                                    <span className="clear">现价:￥{data.product_price}</span>
                                    <span className="clear">原价:￥{data.product_oldPrice}</span>
                                </h6>
                                <h6 className="lfy_productDetails_up_introduce_buySize_specification">
                                    <span className="clear">请选择规格</span>
                                    <span className="clear">{data.product_number}{data.product_specification}</span>
                                </h6>
                                <div className="lfy_productDetails_up_introduce_buySize_submit">
                                    <div className="lfy_productDetails_up_introduce_buySize_number">
                                        <span>数量: </span>
                                        <div onClick={clickNumMinus}>-</div>
                                        <input type="text" defaultValue="1" ref={number}></input>
                                        <div onClick={clickNumAdd}>+</div>
                                        <span> 件</span>
                                    </div>
                                    <div className="lfy_productDetails_up_addCart">
                                        <Button type="text" onClick={showModal} className="cart">
                                            加入购物车
                                        </Button>
                                        <Modal
                                            width={700}
                                            height={700}
                                            title="加入购物车"
                                            visible={isModalVisible}
                                            onOk={handleOk}
                                            onCancel={handleCancel1}
                                            footer={[<Button className="tyc_add_cart_btn" onClick={handleCancel(
                                                data.store_name,
                                                data.product_name,
                                                data.product_number,
                                                data.product_specification,
                                                data.product_id,
                                                data.product_price,
                                                data.product_img,
                                                'cart'
                                            )} key={k}>添加到购物车 </Button>]}>
                                            <CheckSizeWindow number={num} buyNumber={buy_Number} />
                                        </Modal>
                                    </div>
                                    <div className="lfy_productDetails_up_onceBuy">
                                        <Button type="text" onClick={showModal1} className="cart">
                                            立即购买
                                        </Button>
                                        <Modal
                                            width={700}
                                            height={700}
                                            title="请选择商品"
                                            visible={isModalVisible1}
                                            onOk={handleOk1}
                                            onCancel={handleCancel11}
                                            footer={[<Button className="tyc_add_cart_btn" onClick={handleCancel(
                                                data.store_name,
                                                data.product_name,
                                                data.product_number,
                                                data.product_specification,
                                                data.product_id,
                                                data.product_price,
                                                data.product_img,
                                                'ensure'
                                            )} key={k + 1}>去结算</Button>]}>
                                            <CheckSizeWindow number={num} buyNumber={buy_Number} />
                                        </Modal>
                                    </div>
                                </div>
                                <div className="lfy_productDetails_up_introduce_buySize_collect">
                                    <div className="lfy_productDetails_up_introduce_buySize_collect_div1">
                                        <Rate count="1" className="collect" onChange={collect(
                                            data.product_id,
                                            data.product_name,
                                            data.product_img,
                                            data.product_brief,
                                            data.product_oldPrice,
                                            data.product_price,
                                        )} />
                                        收藏此商品
                                    </div>
                                    <div className="lfy_productDetails_up_introduce_buySize_collect_div2">
                                        分享到:
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                )}
                <div className="lfy_productDetails_down">
                    <h6>
                        <div><NavLink to="/home/fridayDetails">商品详情</NavLink></div>
                        <div><NavLink to="/home/fridayDetails/evaluate">商品评价</NavLink></div>
                    </h6>
                    <div>
                        <Outlet></Outlet>
                    </div>
                </div>
            </div>
        </div>

    )

}
